<template>
	<div class="detail">
		<div class="image">
			<img class="img" :src="blogdetail.image" alt="" />
		</div>
		<div class="contentbox">
			<div class="name">{{ blogdetail.name }}</div>
			<div class="content" v-html="blogdetail.content"></div>
			<div class="tags">
				<div
					class="tag"
					v-for="(tag, index) in blogdetail.tags"
					:key="index"
				>
					{{ tag }}
				</div>
			</div>
			<div class="b_footer">
				<div class="time">
					<img class="icon" src="@/assets/images//time.png" alt="" />
					{{ blogdetail.date | formTime }}
				</div>
				<div class="see">
					<img class="icon" src="@/assets/images//see.png" alt="" />{{
						blogdetail.number
					}}
				</div>
				<div class="love" @click="love">
					<img
						class="icon"
						src="@/assets/images//love_active.png"
						alt=""
					/>{{ blogdetail.love }}
				</div>
			</div>
		</div>

		<div
			class="title_dialog"
			:class="showdialog ? 'dialog_show' : 'dialog_hide'"
		>
			{{ showdialogtitle }}
		</div>
	</div>
</template>

<script>
import {
	apigetblogdetail,
	apigetblognumber,
	apigetbloglove,
} from "@/network/request";
import Prism from "prismjs"; //引入插件
export default {
	name: "detail",
	data() {
		return {
			showdialog: false,
			showdialogtitle: "",
			blog_id: "",
			blogdetail: {},
			setInterval: "",
		};
	},
	created() {
		this.blog_id = this.$route.query.id;
		console.log(this.blog_id);
		this.getblogdetail();
		this.setblognumber();
	},
	mounted() {
		// 高亮渲染
		this.setInterval = setInterval(() => {
			Prism.highlightAll();
		}, 0);
	},
	beforeDestroy() {
		clearInterval(this.setInterval);
	},
	methods: {
		getblogdetail() {
			apigetblogdetail({ _id: this.blog_id }).then((res) => {
				if (res.status == 200) {
					this.blogdetail = res.data;
				}
			});
		},
		setblognumber() {
			apigetblognumber({ _id: this.blog_id });
		},
		// 点赞
		love() {
			var love_arr =
				JSON.parse(localStorage.getItem("love_my_blog")) || [];
			if (love_arr.indexOf(this.blog_id) == -1) {
				apigetbloglove({ _id: this.blog_id }).then((res) => {
					if (res.status == 200) {
						this.getblogdetail();
						love_arr.push(this.blog_id);
						window.localStorage.setItem(
							"love_my_blog",
							JSON.stringify(love_arr)
						);
						this.showdialog = true;
						this.showdialogtitle = "点赞成功";
						setTimeout(() => {
							this.showdialog = false;
						}, 3000);
					}
				});
			} else {
				this.showdialog = true;
				this.showdialogtitle = "已经点赞过了";
				setTimeout(() => {
					this.showdialog = false;
				}, 3000);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.detail {
	width: 100%;
	height: 100%;
	padding-bottom: 80px;
	.image {
		width: 100%;
		.img {
			display: block;
			width: 100%;
			height: 240px;
			object-fit: cover;
		}
	}
	.contentbox {
		width: calc(100vw - 400px);
		margin: 0 auto;
		.name {
			font-size: 22px;
			font-weight: bold;
			text-align: center;
			color: #030303;
			margin: 10px;
		}
		::v-deep .content {
			font-size: 16px;
			color: #030303;
			img {
				display: block;
				width: 100%;
			}
		}
		.tags {
			display: flex;
			flex-wrap: wrap;
			font-size: 14px;
			color: #fff;
			margin-top: 10px;
			.tag {
				margin-right: 6px;
				padding: 2px 10px;
				box-sizing: border-box;
				background-color: #09463e;
				border-radius: 20px;
				margin-bottom: 4px;
			}
		}
		.b_footer {
			display: flex;
			justify-content: flex-end;
			margin-top: 6px;
			font-size: 14px;
			color: #666;
			.icon {
				display: block;
				width: 24px;
				margin-right: 4px;
			}

			.time,
			.see,
			.love {
				display: flex;
				align-items: center;
			}
			.see,
			.love {
				margin-left: 10px;
			}
			.love {
				cursor: pointer;
			}
		}
	}
}

.title_dialog {
	font-size: 14px;
	color: #fff;
	padding: 10px 30px;
	box-sizing: border-box;
	border: 1px solid #09463e;
	border-radius: 4px;
	box-shadow: 0 0 20px -2px rgba($color: #09463e, $alpha: 0.6);
	background: #09463e;
	position: fixed;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
}
.dialog_show {
	display: block;
	animation: up_down 0.5s ease-in 1;
}
.dialog_hide {
	display: none;
}
@keyframes up_down {
	0% {
		transform: translate(-50%, -100px);
	}
	100% {
		transform: translate(-50%, 0);
	}
}

@media screen and (max-width: 1100px) {
	.contentbox {
		width: calc(100vw - 200px);
	}
}
@media screen and (max-width: 800px) {
	.contentbox {
		width: calc(100vw - 60px);
	}
}
</style>
